<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="$props.data.open"
        width="1000px"
        :before-close="close"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ t('资料管理') }}
            </div>
        </template>
        <el-scrollbar class="ba-table-form-scrollbar" style="height: calc(100% - 52px)">
            <div class="tag">
                <el-button v-blur :class="[state.tag == 0 ? 'active' : '']" @click="state.tag = 0">文件资料</el-button>
                <el-button v-blur :class="[state.tag == 1 ? 'active' : '']" @click="state.tag = 1">基础信息</el-button>
                <el-button v-blur :class="[state.tag == 2 ? 'active' : '']" @click="state.tag = 2">商品信息</el-button>
                <span style="float: right; cursor: pointer; margin-right: 20px;">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link" style="color: #409EFF;">
                            {{ t('下载资料') }}
                            <Icon name="el-icon-ArrowDown" color="#409EFF" size="12" />
                        </span>
                        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="a" disabled>{{ t('采购合同') }}</el-dropdown-item>
                            <el-dropdown-item command="b" disabled>{{ t('发票') }}</el-dropdown-item>
                            <el-dropdown-item command="c" disabled>{{ t('报关单') }}</el-dropdown-item>
                            <el-dropdown-item command="d" disabled>{{ t('装箱单') }}</el-dropdown-item>
                            <el-dropdown-item command="e" divided disabled>{{ t('全部下载') }}</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </span>
            </div>
            <div class="ba-operate-form tag-0" style="padding: 25px 10px 0 10px;" v-if="state.tag == 0">
                <el-table :data="tableData" style="width: 100%; background-color: transparent;" :span-method="arraySpanMethod" border row-class-name="no-hover" cell-class-name="no-hover">
                    <el-table-column :label="t('分类')" width="130" align="center">
                        <template #default="scope">
                            <span style="text-align: center;">{{ scope.row.category }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('名称')" align="center" width="220">
                        <template #default="scope">
                            <div style="text-align: center;">{{ scope.row.name }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('文件')" align="center">
                        <template #default="scope">
                            <span><el-link :href="scope.row.file.url" target="_blank" type="primary" style="font-size: 13px;">{{ scope.row.file.name }}</el-link></span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('上传')" align="center" width="150" class-name="upload-column">
                        <template #default="scope">
                            <FormItem :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(scope.row), showFileList: false }" type="file" v-model="scope.row.file_url" style="margin-bottom: 0; margin-top: 0px;"  />
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="Operations">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                            >Edit</el-button
                            >
                            <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                            >Delete</el-button
                            >
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>
            <div class="ba-operate-form" style="padding-top: 25px;" v-if="state.tag == 1">
                <el-form
                    label-position="right"
                    label-width="100px"
                    :inline="true"
                >
                    <FormItem :label="t('买方公司名')" type="string" v-model="state.form.name" :placeholder="t('买方公司名')" />
                    <FormItem :label="t('买方收货地址')" type="string" v-model="state.form.name" :placeholder="t('买方收货地址')" />
                    <FormItem :label="t('买方联系电话')" type="string" v-model="state.form.name" :placeholder="t('买方联系电话')" />
                    <FormItem :label="t('签约日期')" type="string" v-model="state.form.name" :placeholder="t('签约日期')" />
                    <FormItem :label="t('发票号')" type="string" v-model="state.form.name" :placeholder="t('发票号')" />
                    <FormItem :label="t('包装种类')" type="string" v-model="state.form.name" :placeholder="t('请选择包装种类')" />
                    <FormItem :label="t('合同协议号')" type="string" v-model="state.form.name" :placeholder="t('合同协议号')" />
                    <FormItem :label="t('标记唛码')" type="string" v-model="state.form.name" :placeholder="t('标记唛码')" />
                    <FormItem :label="t('监管方式')" type="string" v-model="state.form.name" :placeholder="t('请选择监管方式')" />
                    <FormItem :label="t('征免性质')" type="string" v-model="state.form.name" :placeholder="t('请选择征免性质')" />
                    <FormItem :label="t('成交方式')" type="string" v-model="state.form.name" :placeholder="t('请选择成交方式')" />
                    <FormItem :label="t('最终目的国')" type="string" v-model="state.form.name" :placeholder="t('请选择最终目的国')" />
                    <FormItem :label="t('贸易国')" type="string" v-model="state.form.name" :placeholder="t('请选择贸易国')" />
                    <FormItem :label="t('成交币制')" type="string" v-model="state.form.name" :placeholder="t('请选择成交币制')" />
                    <FormItem :label="t('是否退税')" type="string" v-model="state.form.name" :placeholder="t('请选择是否退税')" />
                </el-form>
            </div>
            <div class="ba-operate-form" style="padding: 25px 10px 0 10px;" v-if="state.tag == 2">
                <!-- 可以直接在标签上使用 el-table的属性和事件 -->
                <span @click="state.drawer = true" class="add-goods-btn" style="border-radius: 30px; background: #ECF5FF; color: #409EFF; cursor: pointer;
                position: absolute; right: 20px; z-index: 999; bottom: 20px; border: 1px solid #C6E2FF; width: 60px; text-align: center; padding: 10px;">
                    {{ t('添加商品') }}
                </span>
                <Table ref="tableRef" :pagination="false">
                    <!-- baTableClass 实例中编程式定义的表格列会渲染在此处 -->
                </Table>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + 100 / 1.8 + 'px)'">
                <el-button @click="$props.data.open = false">{{ t('关闭') }}</el-button>
                <el-button v-blur type="primary" @click="save">{{ t('保存') }}</el-button>
            </div>
        </template>


        
        
    </el-dialog>

    <el-drawer
        v-model="state.drawer"
        :title="t('添加商品')"
        size="700"
        direction="rtl"
    >
        <div>
            <el-form
                label-position="right"
                label-width="100px"
                :inline="true"
            >
                <el-form-item :label="t('商品编码')">
                    <el-select v-model="state.form.hscode_id" placeholder="hs code" clearable filterable @change="changeHscode">
                        <el-option v-for="item in state.hscode" :key="item.id" :label="item.hscode" :value="item.id">
                            <span style="margin-right: 20px; color: #333; font-weight: normal;">{{ item.hscode }}</span>
                            <span style="color: #8a8a8a; font-size: 12px; font-weight: normal;">{{ item.name }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <FormItem :label="t('商品名称')" type="string" v-model="state.goods.name" :placeholder="t('必须存在中文')" />
                <FormItem :label="t('境内货源地')" type="string" v-model="state.form.name" />
                <FormItem :label="t('原产国')" type="string" v-model="state.form.name" />
                <FormItem :label="t('法定单位')" type="string" v-model="state.form.name" />
                <FormItem :label="t('法定数量')" type="string" v-model="state.form.name" :placeholder="t('根据法定单位填写')" />
                <FormItem :label="t('成交数量')" type="string" v-model="state.form.name" />
                <FormItem :label="t('成交单位')" type="string" v-model="state.form.name" />
                <FormItem :label="t('成交总价')" type="string" v-model="state.form.name" />
                <FormItem :label="t('成交单价')" type="string" v-model="state.form.name" />
                <FormItem :label="t('混装情况')" type="string" v-model="state.form.name" />
                <FormItem :label="t('外包装箱数')" type="string" v-model="state.form.name" />
                <FormItem :label="t('毛重')" type="string" v-model="state.form.name" :placeholder="t('含包装')" />
                <FormItem :label="t('净重')" type="string" v-model="state.form.name" :placeholder="t('不含包装')" />
                <FormItem :label="t('是否退税')" type="string" v-model="state.form.name" :placeholder="t('请选择是否退税')" />
            </el-form>
        </div>

        <template #footer>
            <div style="flex: auto">
                <el-button @click="state.drawer = false">{{ t('取消') }}</el-button>
                <el-button type="primary">{{ t('添加') }}</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'

import Table from '/@/components/table/index.vue' // 导入 Table 组件
import baTableClass from '/@/utils/baTable' // 导入 baTable 类
import { baTableApi } from '/@/api/common' // 导入表格api方法生成器
import { defaultOptButtons } from '/@/components/table' // 导入默认表格操作按钮数据:拖拽排序、编辑、删除按钮


const { t } = useI18n()

import { getHscodeApi, saveFileApi, getFileApi } from '/@/api/most/business/information'

const emit = defineEmits(["closeInformation"])

const uploadFileSuccess = (row: anyObj) => {
    return (file: anyObj) => {
        console.log(row)
        // if(row.type == 'buy_contract') state.file.buy_contract = row.file_url
        // row.file = row.file_url;
        let data = {
            no: state.form.no,
            file_url: row.file_url,
            type: row.type
        }
        saveFileApi(data).then((e) => {
            row.file = e.data;
        })
    }
}

const state = reactive({
    form: props.data,
    tag: 0,
    drawer: false,
    hscode: [],
    goods: {
        name: ''
    },
    file: {
        buy_contract: {
            id: 0,
            name: '',
            url: ''
        },
        buy_po: {},
        buy_pi: {},
        sell_contract: {},
        sell_po: {},
        sell_pi: {},
        pack: {},
        cdf: {},
        take: {},
        ver: {},
        statement: {},
    },
    
})





const tableData = reactive([
    {
        category: t('买方'),
        name: t('售货合同'),
        num: 3,
        file: state.file.buy_contract,
        type: 'buy_contract'
    },
    {
        category: '买方',
        name: t('订单') + '(PO)',
        file: state.file.buy_po,
        type: 'buy_po'
    },{
        category: '买方',
        name: t('发票') + '(PI)',
        file: state.file.buy_po,
        type: 'buy_pi'
    },
    {
        category: '卖方',
        name: t('售货合同'),
        num: 3,
        file: '',
        type: 'sell_contract'
    },
    {
        category: '卖方',
        name: t('订单') + '(PO)',
        file: '',
        type: 'sell_po'
    },
    {
        category: '卖方',
        name: t('发票') + '(PI)',
        file: '',
        type: 'sell_pi'
    },
    {
        category: '物流相关',
        name: '箱单',
        num: 5,
        file: '',
        type: 'pack'
    },
    {
        category: '物流相关',
        name: '报关单',
        file: '',
        type: 'cdf'
    },{
        category: '物流相关',
        name: '提单',
        file: '',
        type: 'take'
    },{
        category: '物流相关',
        name: '进仓核实单',
        file: '',
        type: 'ver'
    },{
        category: '物流相关',
        name: '进口声明书',
        file: '',
        type: 'statement'
    },
    {
        category: '退税相关',
        name: 'xxxxxxx',
        address: 'No. 189, Grove St, Los Angeles',
        num: 1,
        file: ''
    }]
)


getFileApi({no: state.form.no}).then((e) => {
    tableData.forEach(item => {
        if(item.type == 'buy_contract') item.file = e.data.buy_contract;
        if(item.type == 'buy_po') item.file = e.data.buy_po;
        if(item.type == 'buy_pi') item.file = e.data.buy_pi;
        if(item.type == 'sell_contract') item.file = e.data.sell_contract;
        if(item.type == 'sell_po') item.file = e.data.sell_po;
        if(item.type == 'sell_pi') item.file = e.data.sell_pi;
        if(item.type == 'pack') item.file = e.data.pack;
        if(item.type == 'cdf') item.file = e.data.cdf;
        if(item.type == 'take') item.file = e.data.take;
        if(item.type == 'ver') item.file = e.data.ver;
        if(item.type == 'statement') item.file = e.data.statement;
    });
})

const arraySpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
}: SpanMethodProps) => {
    if (columnIndex === 0) {
        if (row.num != undefined) {
            return {
                rowspan: row.num,
                colspan: 1,
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            }
        }
    }
}




interface Props {
    data: anyObj
}

const props = defineProps<Props>()

// 关闭弹窗
const close = (done: () => void) => {
    emit("closeInformation")
    done()
}

const save = () => {
    addAgentApi(state.form).then((e) => {
        console.log(e)
        close()
    })
}

const changeHscode = () => {
    alert()
}




const tableRef = ref()

// 直接实例化 baTableClass 并传递各种参数
const baTable = new baTableClass(
    new baTableApi('/system/business.Business/'), // 一个api类的实例，自动生成index、edit、del、等url和请求方法，提供控制器url即可
    // 表格数据
    {
        // 表格列
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: 'ID', prop: 'id', align: 'center', operator: 'LIKE', operatorPlaceholder: '模糊查询', width: 70 },
            { label: '用户名', prop: 'username', align: 'center', operator: 'LIKE', operatorPlaceholder: '模糊查询' },
            // ...
            {
                label: '操作',
                align: 'center',
                width: '100',
                render: 'buttons',
                // 操作按钮传递的只是一个按钮配置数组，你也可以在渲染前对数组配置进行修改
                buttons: defaultOptButtons(['edit', 'delete']),
                operator: false,
            },
        ],
        // 不允许双击编辑的列的 prop
        dblClickNotEditColumn: ['all'],
        // ...属性很多，请参考本文下方的表格全部可用属性，或翻阅源代码（有注释）
    }, {
        defaultItems: {  },
    },{
        
    },{
        getIndex: ({ res }: { res: ApiResponse }) => { // 查看后
            getHscodeApi({business_id: state.form.id}).then((e) => {
                console.log(e)
                state.hscode = e.data.list;
            })
        }
    }
)

// 相当于表格的onMounted，也可以在页面的onMounted时执行
baTable.mount()

// 获取数据，可以在页面的onMounted时执行，也可以比如先请求一个API，再执行获取数据
// baTable.getIndex()!.then(() => {
// })


</script>

<style scoped lang="scss">
:deep(.el-upload-list--picture-card .el-upload-list__item){
    width: 90px;
    height: 90px;
}
:deep(.el-upload--picture-card){
    width: 90px;
    height: 90px;
}
:deep(.ba-upload-select-image){
    width: 90px;
}
:deep(.ba-upload.files .el-button [class*=el-icon]+span){
    position: relative;
    top: -3px;
}
:deep(.el-form--inline .el-form-item){
    margin-right: 10px;
}
.tag{
    margin-top: 20px;
    margin-left: 18px;
}

.tag .active{
    background: #ECF5FF;
    color: #409EFF;
    border: 1px solid #C6E2FF;
}
.add-goods-btn:hover{
    background: #ddeafa!important;
    user-select: none;
}
:deep(.tag-0 .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){
    border-top: 1px solid #efefef;
    border-right: 1px solid #efefef;
}

:deep(.upload-column .el-form-item__label){
    display: none;
}
:deep(.upload-column .ba-upload.file){
    line-height: 8px;
}
</style>
